<template>
    <div>
      <el-form inline>
        <el-form-item>
          <el-input v-model="tempSearchObj.roleName" placeholder="角色名称"/>
        </el-form-item>
  
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button @click="resetSearch">清空</el-button>
      </el-form>
  
      <div style="margin-bottom: 20px">
        <el-button type="primary"  @click="addRole">添加</el-button>
        <el-button type="danger" @click="removeRoles()" :disabled="selectedRoles.length === 0">批量删除</el-button>
      </div>
  
      <el-table
        border
        stripe
        style="width: 960px"
        v-loading="listLoading"
        :data="roles"
        @selection-change="handleSelectionChange">
  
        <el-table-column
          type="selection"
          width="55" />
  
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center">
        </el-table-column>
  
        <el-table-column label="角色名称">
          <template slot-scope="{row}">
            <template v-if="row.edit">
              <el-input v-model="row.roleName" class="edit-input" size="small" />
              <el-button
                class="cancel-btn"
                size="small"
                icon="el-icon-refresh"
                type="warning"
                @click="cancelEdit(row)"
              >
                取消
              </el-button>
            </template>
            <span v-else>{{ row.roleName }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="{row}">
            <el-button size="mini" type="info" icon="el-icon-info" title="分配权限"
              @click="$router.push(`/acl/role/auth/${row.id}?roleName=${row.roleName}`)"/>
  
            <el-button size="mini" type="primary" icon="el-icon-check" title="确定" 
              @click="updateRole(row)" v-if="row.edit"/>
            <el-button size="mini" type="primary" icon="el-icon-edit" title="修改角色" 
              @click="row.edit= true" v-if="!row.edit"/>
  
              
            <el-button size="mini" type="danger" icon="el-icon-delete" title="删除角色"
              @click="removeRole(row)"/>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
        style="padding: 20px 0;"
        layout="prev, pager, next, jumper, ->, sizes, total"
        @current-change="getRoles"
        @size-change="handleSizeChange"
      />
    </div>
  </template>
  
  <script>
  
  export default {
  
    name: 'RoleList',
  
    data() {
      return {
        listLoading: true, // 数据是否正在加载
        roles: [], // 角色列表
        total: 0, // 总记录数
        page: 1, // 当前页码
        limit: 5, // 每页记录数
        tempSearchObj: { // 收集搜索条件数据
          roleName: '',
        },
        searchObj: { // 发送请求的条件参数数据
          roleName: '',
        },
        selectedRoles: [] // 所有选中的角色列表
      }
    },
  
    mounted() {
      this.getRoles()
    },
  
    methods: {
  
      /* 
      取消修改
      */
      cancelEdit(role) {
        role.roleName = role.originRoleName
        role.edit = false
        this.$message.warning('取消角色修改')
      },
  
      /* 
      更新角色
      */
      updateRole (role) {
        this.$API.role.updateById({id: role.id, roleName: role.roleName})
          .then(result => {
            this.$message.success(result.message|| '更新角色成功!')
            this.getRoles(this.page)
          })
      },
  
      /* 
      每页数量发生改变的监听
      */
      handleSizeChange(pageSize) {
        this.limit = pageSize
        this.getRoles()
      },
  
      /* 
      添加角色
      */
      addRole(){
        // 显示添加界面
        this.$prompt('请输入新名称', '添加角色', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$API.role.save({roleName: value}).then(result => {
            this.$message.success(result.message || '添加角色成功')
            this.getRoles()
          })
        }).catch(() => {
          this.$message.warning('取消添加')
        })
      },
  
      /* 
      异步获取角色分页列表
      */
      getRoles(page = 1) {
        this.page = page
        this.listLoading = true
        const {limit, searchObj} = this
        this.$API.role.getPageList(page, limit, searchObj).then(
          result => {
            const {items, total} = result.data
            this.roles = items.map(item => {
              item.edit = false // 用于标识是否显示编辑输入框的属性
              item.originRoleName = item.roleName // 缓存角色名称, 用于取消
              return item
            })
            this.total = total
          }
        ).finally(() => {
          this.listLoading = false
        })
      },
  
      /* 
      根据搜索条件进行搜索
      */
      search () {
        this.searchObj = {...this.tempSearchObj}
        this.getRoles()
      },
  
      /* 
      重置查询表单搜索列表
      */
      resetSearch() {
        this.tempSearchObj = {
          roleName: ''
        }
        this.searchObj = {
          roleName: ''
        }
        this.getRoles()
      },
  
      /* 
      删除指定的角色
      */
      removeRole ({id, roleName}) {
        this.$confirm(`确定删除 '${roleName}' 吗?`, '提示', {
          type: 'warning'
        }).then(async () => {
          const result = await this.$API.role.removeById(id)
          this.getRoles(this.roles.length===1 ? this.page-1 : this.page)
          this.$message.success(result.message || '删除成功!')
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      },
  
      /* 
      当表格复选框选项发生变化的时候触发
      */
      handleSelectionChange(selection) {
        this.selectedRoles = selection
      },
  
      /* 
      批量删除
      */
      removeRoles () {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          type: 'warning'
        }).then(async () => {
          const ids = this.selectedRoles.map(role => role.id)
          const result = await this.$API.role.removeRoles(ids)
          this.getRoles()
          this.$message({
            type: 'success',
            message: '批量删除成功!'
          })
        }).then((result) => {
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
  </style>